<template>
	<view class="greyBox">
		<view class="details">
			<view class="item">
				<view class="title special">
					{{details.carList.brand}}-{{details.carList.series}}-{{details.carList.model}}
				</view>
				<view class="subTitle">
					<view class="icon">
						<u-icon name="https://supply.zhongyimotor.com/upload/applet/pic_car_supplier@2x.png"
							size="32"></u-icon>
					</view>
					车架号 {{details.carList.vin}}
				</view>
			</view>
			<view class="item">
				<view class="flexBox_two">
					<view class="info">
						<view class="title special">出口国家</view>
						<view class="name">{{details.sellerCarOutApply.startHarborCountry}}</view>
					</view>
					<view class="info">
						<view class="title special">目的港</view>
						<view class="name">{{details.sellerCarOutApply.endHarborCountry}}</view>
					</view>
				</view>
				<view class="tags">
					<view class="tag" v-for="(item,index) in details.carFilesList" :key="index"
						@click="openFile(item.fileUrl)">
						{{getStatusLabel(exportFormalitiesType,item.type)}}
						<view class="icon">
							<u-icon
								name="https://supply.zhongyimotor.com/upload/applet/icon_information_supplier@2x.png"
								size="32"></u-icon>
						</view>
					</view>
				</view>
			</view>
			<view class="item pad_0">
				<view class="top">
					<view class="title">车辆出口信息</view>
					<!-- <view class="right">装箱信息<u-icon name="arrow-right"></u-icon></view> -->
				</view>
				<view class="content">
					<view class="infoItem" v-for="(item,index) in details.transportFiles" :key="index"
						@click="openFile(item.fileUrl)">
						<view class="infoCell">
							<view class="title grey">{{getStatusLabel(exportFileType, item.type)}}</view>
							<view class="data">
								<u-icon
									name="https://supply.zhongyimotor.com/upload/applet/icon_contract2_supplier@2x.png"
									size="32"></u-icon>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="item pad_0">
				<view class="top">
					<view class="title">车辆仓储信息</view>
				</view>
				<view class="content">
					<view class="infoItem" v-for="(item, index) in details.storeCarLogList" :key="index">
						<view class="infoCell">
							<view class="title">{{item.storeName}}</view>
							<view class="data">{{getStatusLabel(warehouseType,item.type)}}</view>
						</view>
						<view class="infoCell">
							<view class="title tiny grey">
								<view class="icon">
									<u-icon
										name="https://supply.zhongyimotor.com/upload/applet/icon_time_greyline_supplier@2x.png"
										size="32"></u-icon>
								</view>
								{{moment(item.timeCreate).format('YYYY-MM-DD HH:mm:ss')}}
							</view>
							<view class="data grey" @click="openFile(item.storeCarFilesList[0].fileUrl)">车辆出入库照片<u-icon
									name="arrow-right"></u-icon></view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
		<u-no-network></u-no-network>
	</view>
</template>

<script>
	import moment from "moment";
	import {
		openFile
	} from '@/utils/index.js';
	import {
		exportFileType,
		getStatusLabel,
		exportFormalitiesType,
		warehouseType
	} from '@/utils/status.js';
	export default {
		data() {
			return {
				exportFileType,
				exportFormalitiesType,
				details: {},
				warehouseType
			}
		},
		onLoad(option) {
			this.getCarDetails(option.id)
		},
		methods: {
			moment,
			openFile,
			getStatusLabel,
			getCarDetails(id) {
				let that = this;
				let params = {
					id
				};
				that.$api.getCarDetails(params).then(res => {
					that.details = res.result;
				})
			}
		}
	};
</script>

<style scoped lang="scss">
	.details {
		padding-top: 20rpx;
		margin-top: 0;

		.item {
			width: 690rpx;

			background: #FFFFFF;
			box-shadow: 0rpx 6rpx 8rpx 0rpx rgba(217, 226, 233, 0.38);
			border-radius: 16rpx;
			margin: 0 auto 20rpx;
			padding: 20rpx 30rpx;
			position: relative;

			.title {
				&.special {
					font-size: 26rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					color: #202020;
					line-height: 36rpx;
					margin-bottom: 20rpx;
				}
			}

			.subTitle {
				display: flex;
				font-size: 24rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #8A8A8A;
				line-height: 34rpx;

				.icon {
					margin-right: 10rpx;
				}
			}

			.flexBox_two {
				display: flex;
				margin-bottom: 40rpx;

				.info {
					width: 304rpx;
					margin-right: 22rpx;

					.title {
						font-size: 26rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #888A8E;
					}

					.name {
						font-size: 34rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #202020;
					}
				}
			}

			.tags {
				display: flex;
				flex-wrap: wrap;

				.tag {
					width: 304rpx;
					height: 60rpx;
					background: rgba(15, 189, 127, 0.07);
					border-radius: 10rpx;
					display: flex;
					padding: 12rpx 20rpx;
					line-height: 36rpx;
					font-size: 26rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #0FBD7F;
					margin-bottom: 20rpx;
					margin-right: 20rpx;

					&:nth-child(2n) {
						margin-right: 0;
					}

					.icon {
						margin-left: auto;
					}
				}
			}
		}
	}
</style>